<template>
    <div>
        <router-link v-show="headShow" tag="div" to="/" class="black"><i class="iconfont">&#xe625;</i></router-link>
        <div class="head" :style="sty" v-show="!headShow">这里是标题</div>
    </div>
</template>

<style scoped>
.black{
    position: absolute;
    top: .3rem;
    left: .3rem;
    z-index: 30;
    width: .7rem;
    height: .7rem;
    border-radius: .35rem;
    background-color: rgba(0, 0, 0, 0.5)
}
.black i{
    color: white;
    position: relative;
    top: .2rem;
    left: .17rem;
}

.head{
    position: fixed;
    width: 100%;
    z-index: 30;
    top: 0;
    left: 0;
    background-color: #03b4d0;
    color: white;
    text-align: center;
    font-size: .3rem;
    padding: .2rem 0rem;
}
</style>

<script>
export default {
    data(){
        return{
            title:"header",
            headShow:true,
            sty:{
                opacity:1
            }
        }
    },
    methods:{
        myscr(){
            console.log(111);
            var top=document.documentElement.scrollTop;
            if(top>60){
                this.headShow=false;
                this.sty.opacity=top/170<=1?top/170:1;
            }else{
                this.headShow=true;
            }
        }
    },
    activated(){
        window.addEventListener("scroll",this.myscr)
    },
    deactivated(){
        console.log("离开");
        window.removeEventListener("scroll",this.myscr);
    }
        
    
}
</script>
